<template>
  <div class="wrap">
    <div
      class="content"
      v-if="full"
    >
      <div
        class="show-demo"
        v-if="demo"
        @click="demo = false"
      >
        <div>
          <img
            class="democlose"
            src="https://o6wndwjxn.qnssl.com/%E5%85%B3%E9%97%AD@2x.png"
            @click="demo = false"
          >
          <p class="zhengqueshili">正确示例</p>
          <img
            class="demo-img"
            src="https://o6wndwjxn.qnssl.com/%E7%A4%BA%E4%BE%8B@2x.png"
          >
          <p class="dododo">为保证上传照片清晰，请尽量横拍</p>
        </div>
      </div>
      <div class="wojiuxianghaohaoxiedaima">
        <div class="yumen">
          <div>姓名</div>
          <input
            v-model="from.name"
            type="text"
            placeholder="请输入真实姓名"
          >
        </div>
        <div class="yumen">
          <div>手机号</div>
          <input
            v-model="from.phone"
            type="text"
            placeholder="请输入手机号"
          >
        </div>
        <div class="yumen">
          <input
            style="text-align:left;"
            id="teshu"
            v-model="from.pasword"
            type="text"
            placeholder="请输入短信验证码"
          >
          <span
            @click="settime"
            v-if="countdown === 60"
          >获取验证码</span>
          <span v-else>{{this.countdown}}</span>
        </div>
        <div class="shenfenzheng">上传身份证<span style="font-family: PingFangSC-Light;font-size:12px">格式为jpg/png/jpeg大小不超过2M</span> <span
            class="shili"
            @click="shili"
          >示例</span></div>
        <div class="idcard">
          <section class="setionsssss">
            <div class="imgsss">
              <div class="upload-img">
                <img
                  class="zheng_img"
                  v-if="zimg"
                  :src="zimg"
                >
                <input
                  class="upload"
                  style="display:block;"
                  @change='add_img(1)'
                  type="file"
                >
              </div>
              <img src="https://o6wndwjxn.qnssl.com/%E8%BA%AB%E4%BB%BD%E8%AF%81-%E6%AD%A3%E9%9D%A2@3x.png">
            </div>
            <div class="shenfenzheng-titile">身份证正面</div>
          </section>
          <section class="setionsssss">
            <div class="imgsss">
              <div class="upload-img">
                <img
                  class="zheng_img"
                  v-if="fimg"
                  :src="fimg"
                >
                <input
                  class="upload"
                  style="display:block;"
                  @change='add_img(2)'
                  type="file"
                >
              </div>
              <img src="https://o6wndwjxn.qnssl.com/%E8%BA%AB%E4%BB%BD%E8%AF%81-%E5%8F%8D%E9%9D%A2@3x.png">
            </div>
            <div class="shenfenzheng-titile">身份证反面</div>
          </section>
        </div>
        <section class="setionddd">
          <div class="imgddd">
            <div class="upload-img">
              <img
                class="zheng_img"
                v-if="cimg"
                :src="cimg"
              >
              <input
                class="upload"
                style="display:block;"
                @change='add_img(3)'
                type="file"
              >
            </div>
            <img src="https://o6wndwjxn.qnssl.com/%E6%89%8B%E6%8C%81%E8%BA%AB%E4%BB%BD%E8%AF%81@3x.png">
          </div>
          <div class="shenfenzheng-titile">手持身份证</div>
        </section>
        <!-- <div class="yumen">
          <label
            class="upload_img"
            for="tuu"
          >
            <img
              class="zheng_img"
              v-if="fimg"
              :src="fimg"
            >
          <div class="upload_desc">点击上传身份证反面</div>
          </label>
          <input
            class="upload"
            style="display: none;"
            @change='add_img(2)'
            type="file"
            id="tuu"
          >
        </div> -->

        <div class="wocuol">
          <div>个人简介</div>
          <div>
            <textarea
              v-model="from.text"
              @blur='Catalog_input_blur'
              @focus="Catalog_input_focus"
              placeholder="请填写50字内的个人简介，便于审核"
              style="font-size:12px"
            ></textarea>
          </div>
        </div>
      </div>
      <div
        class="btn-sb"
        @click="tijiao"
      >成为讲师</div>
    </div>
    <div
      class="sucess"
      v-if="hahaha"
    >
      <section>
        <img  style="width:65px;height:65px;" v-if="status==1" src="https://o6wndwjxn.qnssl.com/%E5%AE%A1%E6%A0%B8%E6%88%90%E5%8A%9F@2x.png">
        <img  style="width:65px;height:65px;" v-if="status==0" src="https://o6wndwjxn.qnssl.com/%E5%AE%A1%E6%A0%B8%E4%B8%AD@2x.png">
        <img  style="width:65px;height:65px;" v-if="status==2" src="https://o6wndwjxn.qnssl.com/%E5%AE%A1%E6%A0%B8%E5%A4%B1%E8%B4%A5@2x.png">
      </section>
      <p
        v-if="status==1"
        style="color:#67C23A"
      >审核成功</p>
      <p
        v-if="status==0"
        style="color:#E6A23C"
      >审核中</p>
      <p v-if="status==2">审核失败</p>
      <aside v-if="status==1">
        <h3 class="miaoshu">恭喜您通过审核，正式成为知运线上教师！</h3>
        <h3 style="color:#999">请移至电脑浏览器访问</h3>
        <h3>http://admin.zhiyunzaixian.com/login<span
            class="btn-sss"
            v-clipboard:copy="'http://admin.zhiyunzaixian.com/login'"
            v-clipboard:success="copy"
          >复制链接</span></h3>
        <h3 style="color:#999">微信扫码登陆教师管理后台，开启您的授课之旅</h3>
      </aside>
      <p
        v-if="status==0"
        style="color:#999;font-size:12px;"
      >（审核时间约一个工作日）</p>
      <!-- <p v-if="status==0">如有问题请拨打客服热线：<a href="tel:13030078792">13030078792</a></p> -->
      <div
        class="btn-ikonw"
        @click="Ikonw"
      >我知道了</div>
      <h3 class="obh3">客服热线：400-6666-903 </h3>
    </div>
  </div>
</template>
<script>
import {
  mapState
} from 'vuex'
import * as qiniu from 'qiniu-js'
import axios from 'axios'
import wxReady from '@/utils/wxReady'
import { addLecturer, msgDx, part, upload, gbkstr } from '@/api/assemble'
var timerId = null
export default {
  data () {
    return {
      demo: false,
      imgLink: '',
      imgData: {
        accept: 'image/jpeg, image/png, image/jpg'
      },
      full: false,
      status: '',
      countdown: 60,
      hahaha: false,
      files: '',
      zimg: '',
      fimg: '',
      cimg: '',
      from: {
        name: '',
        phone: '',
        pasword: '',
        zimg: '',
        fimg: '',
        cimg: '',
        text: ''
      },
      labelPosition: 'right',
      formData: {
        userName: '',
        tel: '',
        verificationCode: '',
        userInfo: ''
      },
      row: '6'
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      openid: state => state.openid
    })
  },
  created () {
    if (this.$route.query.cid) {
      this.fenxiang = JSON.parse(this.$route.query.cid)
    }
    this.partyTime()
  },
  mounted () {
    this.$nextTick(() => {
      this.$store.commit('updateLoadingStatus', { isLoading: false })
      this.wxShare()
    })
  },
  methods: {
    shili () {
      this.demo = true
    },
    Catalog_input_focus () {
      let cnt = 0
      setInterval(() => {
        if (cnt < 3) {
          cnt++
        } else {
          clearInterval(timerId)
          timerId = null
          return
        }
        document.body.scrollTop = document.body.scrollHeight
      }, 300)
    },
    Catalog_input_blur () {
      window.scrollTo(0, 700)
      if (timerId) {
        clearInterval(timerId)
        timerId = null
      }
    },
    // 微信分享
    copy () {
      this.$vux.alert.show({
        title: '提示',
        content: '复制成功',
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          console.log('Plugin: I\'m hiding')
        }
      })
    },
    wxShare () {
      let title = '知运365'
      let desc = '快来注册成为讲师赚钱吧'
      wxReady(title, desc, 'teacherForm', 'http://o6wndwjxn.qnssl.com/87a6a2019011208571771.png'
      ).then(() => {
        this.marsk = false
      })
    },
    partyTime () {
      let obj = {
        member_id: this.user_id
      }
      part(obj).then(res => {
        if (res.data.code === 200) {
          this.full = true
          this.status = res.data.data
          if (res.data.data == 0) {
            this.hahaha = true
          } else if (res.data.data == 1) {
            this.hahaha = true
          } else if (res.data.data == 2) {
            this.hahaha = true
          } else {
            this.hahaha = false
          }
        } else {
          this.hahaha = false
          this.$vux.alert.show({
            title: '提示',
            content: res.data.msg
          })
        }
      })
    },
    settime () {
      let zhengze = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if (!zhengze.test(this.from.phone)) {
        this.$vux.alert.show({
          title: '提示',
          content: '请输入正确的手机号码'
        })
        return false
      }
      let obj = {
        tel: this.from.phone,
        app_id: this.app_id,
        title: 1
      }
      msgDx(obj).then(res => {
        if (res.data.code === 200) {
          this.timout()
        }
      })
    },
    timout () {
      if (this.countdown === 0) {
        this.countdown = 60
      } else {
        this.countdown--
        setTimeout(() => {
          this.timout()
        }, 1000)
      }
    },
    // 上传图片
    add_img (ss) {
      var files = event.target.files[0]
      // var url = URL.createObjectURL(files)
      let type = files.type // 文件的类型，判断是否是图片
      let size = files.size // 文件的大小，判断图片的大小
      console.log(files)
      let marsksizes
      if (size < 800000 && size > 200000) {
        marsksizes = 1300
      } else if (size > 100000) {
        marsksizes = 1600
      } else if (size > 600000) {
        marsksizes = 2000
      } else {
        marsksizes = 600
      }
      if (this.imgData.accept.indexOf(type) == -1) {
        this.$vux.alert.show({
          title: '提示',
          content: '请上传正确图片格式'
        })
        return false
      } else if (size > 1024 * 1024 * 2) {
        this.$vux.alert.show({
          title: '提示',
          content: '请上传2M以内图片'
        })
      } else {
        this.$vux.loading.show({
          text: '上传中请等待上传'
        })
        // if (ss === 1) {
        //   this.zimg = url
        // } else if (ss === 2) {
        //   this.fimg = url
        // }
        this.files = files
        let config = {
          useCdnDomain: true
        }
        axios.post('http://api.zhiyunzaixian.com/chat/chat/up_token').then(res => {
          let { code, data } = res.data
          let that = this
          if (code === 200) {
            var observable = qiniu.upload(this.files, `${(new Date()).getTime()}${files.name}`, data, config)
            this.observer = {
              next (res) {
                console.log('next', res)
              },
              complete (res) {
                let domain = 'https://o6wndwjxn.qnssl.com/'
                if (ss === 1) {
                  // that.zimg = `https://o6wndwjxn.qnssl.com/${res.key}`
                  let abc = res.key
                  that.zimg = qiniu.watermark({
                    mode: 2, // 文字水印
                    text: '此照片仅供注册讲师使用', // 水印文字，mode = 2 时 **必需**
                    dissolve: 100, // 透明度，取值范围1-100，非必需，下同
                    gravity: 'Center', // 水印位置，同上
                    fontsize: marsksizes, // 字体大小，单位: 缇
                    font: '黑体', // 水印文字字体
                    dx: 0, // 横轴边距，单位:像素(px)
                    dy: 0, // 纵轴边距，单位:像素(px)
                    fill: '#fa0000'
                  }, abc, domain) // key 为非必需参数，下同
                  that.from.zimg = that.zimg
                } else if (ss === 2) {
                  let abc = res.key
                  that.fimg = qiniu.watermark({
                    mode: 2, // 文字水印
                    text: '此照片仅供注册讲师使用!', // 水印文字，mode = 2 时 **必需**
                    dissolve: 100, // 透明度，取值范围1-100，非必需，下同
                    gravity: 'Center', // 水印位置，同上
                    fontsize: marsksizes, // 字体大小，单位: 缇
                    font: '黑体', // 水印文字字体
                    dx: 0, // 横轴边距，单位:像素(px)
                    dy: 0, // 纵轴边距，单位:像素(px)
                    fill: '#fa0000'
                  }, abc, domain) // key 为非必需参数，下同
                  that.from.fimg = that.fimg
                  // that.from.fimg = res.key
                  // that.fimg = `https://o6wndwjxn.qnssl.com/${res.key}`
                } else {
                  let abc = res.key
                  that.cimg = qiniu.watermark({
                    mode: 2, // 文字水印
                    text: '此照片仅供注册讲师使用!', // 水印文字，mode = 2 时 **必需**
                    dissolve: 100, // 透明度，取值范围1-100，非必需，下同
                    gravity: 'Center', // 水印位置，同上
                    fontsize: marsksizes, // 字体大小，单位: 缇
                    font: '黑体', // 水印文字字体
                    dx: 0, // 横轴边距，单位:像素(px)
                    dy: 0, // 纵轴边距，单位:像素(px)
                    fill: '#fa0000'
                  }, abc, domain) // key 为非必需参数，下同
                  that.from.cimg = that.cimg
                }
                that.$vux.loading.hide()
                console.log('complete', res.key)
              },
              error (errs) {
                this.$vux.loading.show({
                  text: errs
                })
              }
            }
            observable.subscribe(this.observer) // 上传开始
          }
        })

        // let formData = new FormData()
        // formData.append('file', this.files)
        // upload(formData).then(res => {
        //   this.$vux.loading.hide()
        //   if (ss === 1) {
        //     this.from.zimg = res.data.data
        //     this.zimg = `https://o6wndwjxn.qnssl.com/${res.data.data}`
        //   } else if (ss === 2) {
        //     this.from.fimg = res.data.data
        //     this.fimg = `https://o6wndwjxn.qnssl.com/${res.data.data}`
        //   }
        // })
      }
    },
    Ikonw () {
      if (this.status == 2) {
        this.hahaha = false
      } else {
        this.$router.push({
          path: '/home'
        })
      }
    },
    tijiao () {
      console.log(this.from.zimg)
      var reg = /^[0-9a-zA-Z]+$/
      var regs = new RegExp('[\\u4E00-\\u9FFF]+$', 'g')
      if (!regs.test(this.from.name)) {
        this.$vux.alert.show({
          title: '提示',
          content: '请输入正确的中文名字'
        })
        return false
      }
      let zhengze = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if (reg.test(this.from.name)) {
        this.$vux.alert.show({
          title: '提示',
          content: '请输入正确的中文名字'
        })
        return false
      }
      if (!zhengze.test(this.from.phone)) {
        this.$vux.alert.show({
          title: '提示',
          content: '请输入正确的手机号码'
        })
        return false
      }
      if (this.from.pasword === '') {
        this.$vux.alert.show({
          title: '提示',
          content: '请输入验证码 '
        })
        return false
      }
      if (this.from.zimg === '') {
        this.$vux.alert.show({
          title: '提示',
          content: '请上传身份证正面'
        })
        return false
      }
      if (this.from.fimg === '') {
        this.$vux.alert.show({
          title: '提示',
          content: '请上传身份证反面'
        })
        return false
      }
      if (this.from.text.length > 50) {
        this.$vux.alert.show({
          title: '提示',
          content: '简介应小于50字'
        })
        return false
      }
      let obj = {
        url_id: this.fenxiang && this.fenxiang.shareid ? this.fenxiang.shareid : 0,
        app_id: this.app_id,
        member_id: this.user_id,
        name: this.from.name,
        phone: this.from.phone,
        msg: this.from.pasword,
        id_s: this.from.zimg,
        id_ss: this.from.fimg,
        id_sss: this.from.cimg,
        text: this.from.text
      }

      addLecturer(obj).then(res => {
        if (res.data.code === 200) {
          this.hahaha = true
          this.$vux.alert.show({
            title: '提示',
            content: '注册成功请等待审核'
          })
          this.partyTime()
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.data.msg
          })
        }
      })
      // console.log(this.from)
    }
  }
}
</script>
 <style lang="less" scoped>
.miaoshu {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  position: relative;
  top: -120px;
}
.democlose {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 20px;
  top: 20px;
}
.dododo {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
}
.show-demo {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
}
.zhengqueshili {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #333333;
  padding-top: 25px;
  padding-bottom: 12px;
  text-align: center;
}
.show-demo div {
  width: calc(100vw * 646 / 750);
  height: calc(100vw * 700 / 750);
  background-color: #fff;
  text-align: center;
  border-radius: 4px;
  position: relative;
}
.show-demo div > .demo-img {
  width: calc(100vw * 431 / 750);
}
.imgddd {
  width: 100%;
  position: relative;
}
.shili {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #DA4131;
  display: inline-block;
  float: right;
  margin-top: 2px;
}
.idcard {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.setionsssss {
  width: calc(100vw * 330 / 750);
}
.shenfenzheng-titile {
  font-family: PingFangSC-Light;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
}
.upload {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 40;
  opacity: 0;
  top: 0;
  left: 0;
}
.imgsss {
  position: relative;
  width: 165px;
  height: 113px;
}
.upload-img {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 30;
}
.pos-img {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.shenfenzheng {
  font-family: PingFangSC-Light;
  font-size: 15px;
  color: #333333;
  margin-bottom: 15px;
  letter-spacing: 0;
}
.btn-sss {
  display: inline-block;
  padding: 5px;
  color: #ff0000;
}
.obh3 {
  position: fixed;
  z-index: 100;
  bottom: 3%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #333;
}
.st2 {
  fill: #ff1212;
}
.st0 {
  fill: #f29911;
}
.st1 {
  fill: #cccccc;
}
.sucess {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 50;
  background-color: #fff;
  aside {
    width: 100%;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 30px;
    h3 {
      font-size: 12px;
      margin-top: 15px;
      color: #333;
    }
    h3:nth-of-type(2) {
      font-size: 12px;
      margin-top: 20px;
      color: #333;
    }
    h3:nth-of-type(3) {
      font-size: 12px;
      margin-top: 0px;
      color: #333;
    }
    h3:last-of-type {
      font-size: 12px;
      margin-top: 0px;
      color: #333;
    }
  }
  section {
    width: 100%;
    text-align: center;
    margin-top: 15%;
    margin-bottom: 20px;
  }
  p {
    width: 100%;
    text-align: center;
  }
  p:nth-of-type(1) {
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #f56c6c;
    margin-bottom: 132px;
  }
  p:nth-of-type(2) {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 20px;
  }
  p:nth-of-type(3) {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    margin-bottom: 65px;
  }
  div {
    width: calc(100% - 20 * 2px);
    height: 38px;
    margin: 0 auto;
    text-align: center;
    line-height: 38px;
    color: #fff;
    font-size: 16px;
    background: #da4131;
    border-radius: 19px;
  }
}
input,
textarea {
  outline-color: invert;
  outline-style: none;
  outline-width: 0px;
  border: none;
  border-style: none;
  text-shadow: none;
  -webkit-appearance: none;
  -webkit-user-select: text;
  outline-color: transparent;
  box-shadow: none;
}
.wojiuxianghaohaoxiedaima {
  width: calc(100vw * 686 / 750);
  margin: 0 auto;
  padding: 75/2px 0px;
  box-sizing: border-box;
  background-color: #fff;
}
.zheng_img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 20;
}
.yumen {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid#D8D8D8;
  padding-bottom: 10px;

  .upload_img {
    width: 100%;
    height: 100%;
    display: block;
    display: flex;
    justify-content: space-between;
    .upload_desc {
      width: auto;
      font-size: 12px;
      color: #999;
    }
  }

  span {
    display: block;
    height: 30px;
    background-color: #DA4131;
    border-radius: 12px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    min-width: 60px;
    padding: 0 10px;
    position: absolute;
    right: 0;
    font-family: PingFangSC-Light;
    letter-spacing: 0;
  }
  div {
    width: 56px;
    font-family: PingFangSC-Regular;
    color: #333;
    line-height: 28px;
    font-size: 15px;
  }
  input {
    flex: 1;
    height: 100%;
    border-radius: 4px;
    font-size: 12px;
    text-align: right;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #999;
  }
  #teshu {
    width: 62%;
    flex: 0 0 62%;
  }
}
.wocuol {
  width: 100%;
  margin-bottom: 20px;
  div:first-of-type {
    font-family: PingFangSC-Regular;
    color: #333;
    margin-bottom: 10px;
    font-size: 15px;
  }
  div {
    width: 100%;
    textarea {
      width: 100%;
      border: 1px solid #e0e0e0;
      min-height: 338/2px;
      border-radius: 5px;
      resize: none;
      box-sizing: border-box;
      padding: 10px;
    }
  }
}
.btn-sb {
  width: 90vw;
  height: 34px;
  background-color: #DA4131 ;
  border-radius: 20px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 15%;
  // left: 50%;
  // transform: translate(-50%, 0);
}
</style>
